<template>
  <div>
    <el-form label-width="80" :inline="true">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="赛事名称">
            <el-input v-model="qo.Filter" style="width:90%" placeholder="输入赛事名称" size="mini" clearable @change="getPageList()" />
          </el-form-item>
        </el-col>
        <el-col :span="14" style="text-align:left">
          <el-button style="margin-top:7px" type="primary" size="mini" @click="getPageList()">查询</el-button>
          <el-button style="margin-top:7px" type="warning" size="mini" @click="resetData">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="tLoading" size="mini" :data="tableData" class="gl_table_noBorder mb_17" style="width: 100%">
      <el-table-column label="序号" type="index" :index="table_index" />
      <el-table-column label="赛事LOGO">
        <template slot-scope="{ row }">
          <div class="gl_clear gl_my_5">
            <div class="gl_mr_10 gl_fl" style="height:75px">
              <img class="table_photo game_coverimg" :src="getStaticFileUrl(row.logoImage)" @error="errorPhoto">
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="赛事名称">
        <template slot-scope="{ row }">
          <span>{{ row.parentName ? row.parentName : '' }}</span>
          <span v-if="row.parentName && row.name">-</span>
          <span>{{ row.name ? row.name : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="赛事时间" width="300">
        <template slot-scope="{ row }">
          <span>{{ row.startTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
          <span>至</span>
          <span>{{ row.endTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="competitionType" label="赛事类型" />
      <el-table-column prop="competitionStatus" label="赛事状态" />
      <el-table-column prop="amount" label="人气榜金额" />
      <el-table-column width="180" label="操作">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="openDetails(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="text-align: right;padding-top: 15px">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="qo.MaxResultCount"
        :current-page="qo.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
    <Details ref="sessionDetail" :row-data="rowData" />
  </div>
</template>

<script>
import Details from './details.vue';
import defaultGameLogo from '@/assets/images/game/game_logoDefaultPhoto.png';
import { api_GET_EventsManagementPopularityCompetitionPopularityList } from '@/extend/api/gameswaggerApi/app';
import { Api_GET_EventsManagementPopularityCompetitionPopularityListQO } from '@/lib/form/game/swaggerForm';
export default {
  components: {
    Details
  },
  props: {
    form: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      defaultGameLogo: defaultGameLogo,
      qo: new Api_GET_EventsManagementPopularityCompetitionPopularityListQO(),
      tLoading: false,
      tableData: [],
      pageTotal: 0,
      rowData: {}
    };
  },
  created() {
    // this.getPageList();
  },
  methods: {
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.qo.startTime = this.form.startTime;
      this.qo.endTime = this.form.endTime;
      this.qo.Sorting = '';
      this.tLoading = true;
      api_GET_EventsManagementPopularityCompetitionPopularityList(this.qo).then(res => {
        this.tLoading = false;
        this.pageTotal = res.totalCount;
        if (res.items) {
          this.tableData = res.items.map(item => {
            item.amount = item.amount / 100;
            return item;
          });
        }
      }, error => {
        this.tLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    resetData() {
      this.qo.Filter = '';
      this.getPageList();
    },
    openDetails(row) {
      this.rowData = row;
      this.$refs['sessionDetail'].open(row);
    },
    table_index(index) {
      return (this.qo.Page - 1) * this.qo.MaxResultCount + index + 1;
    },
    // 获取静态图片
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultGameLogo;
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style scoped>
.game_coverimg {
  max-width: 74px;
  max-height: 74px;
  border-radius: 50%;
  vertical-align: middle;
}
</style>
